<template>
  <div>
    <h2>这是计数器页面</h2>
    <div>
      <div>计数：{{count}}  -  {{countAlias}}</div>
      <div>双倍计数：{{doubleCount}}  -  {{doubleCountAlias}}</div>
      <br/>
      <button @click="increment">+1</button>
      <div>
        增加值 <input type="text" v-model="num" />
        <button @click="incrementBy(num)">=</button>
      </div>
      <div>
        <button @click="asyncAdd">异步加10</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'index',
  data () {
    return {
      num: 0,
      localCount: 10
    }
  },
  computed: {

    /*
    * ------------------------------------------------------------
    * mapState
    */

    // 【传统形式】
    // count () {
    //   return this.$store.state.count
    // },

    // 【对象形式】
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,

      // 传字符串参数 'count' 等同于 `state => state.count`
      // 使用这种方式可以更简洁地为state生成的计算属性定义一个别名
      countAlias: 'count',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    }),

    // 【数组形式】
    // 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
    ...mapState([
      // 映射 this.count 为 store.state.count
      'count'
    ]),



    /*
    * ------------------------------------------------------------
    * mapGetters
    */
   
    // 【传统形式】
    // doubleCount () {
    //   return this.$store.getters.doubleCount
    // }

    // 【对象形式】
    // 如果你想将一个 getter 属性另取一个名字，使用对象形式
    ...mapGetters({
      // 把 `this.doubleCountAlias` 映射为 `this.$store.getters.doubleCount`
      doubleCountAlias: 'doubleCount'
    }),

    // 【数组形式】
    ...mapGetters(['doubleCount'])
  },
  methods: {
    
    /*
    * ------------------------------------------------------------
    * mapMutations
    */
   
    // 【传统形式】
    // 自增1
    // increment () {
    //   this.$store.commit('increment')
    // },
    // // 加指定的值
    // incrementBy (amount) {
    //   this.$store.commit('incrementBy', amount)
    // },
    
    // 【数组形式】
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),

    // 【对象形式】
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),

    // // 异步加1
    // asyncAdd () {
    //   this.$store.dispatch('asyncAddAction')
    // }

    /*
    * ------------------------------------------------------------
    * mapActions
    */

   // 【数组形式】
    ...mapActions([
      'asyncAddAction', // 将 `this.asyncAddAction()` 映射为 `this.$store.dispatch('asyncAddAction')`
    ]),

    // 【对象形式】
    ...mapActions({
      asyncAdd: 'asyncAddAction' // 将 `this.asyncAdd()` 映射为 `this.$store.dispatch('asyncAddAction')`
    })
  }
}
</script>
